<template>
  <div class="Choose">
    <div class="ChooseInner">
      <!-- 步骤栏 -->
      <el-steps :active="2" align-center>
        <el-step title="步骤1" description="选择电影场次"></el-step>
        <el-step title="步骤2" description="选择座位号"></el-step>
        <el-step title="步骤3" description="加入购物车"></el-step>
        <el-step title="步骤4" description="结算付款"></el-step>
      </el-steps>

      <!-- 主体内容 -->
      <div class="content">
        <!-- 信息显示 -->
        <div class="conLeft">
          <img :src="FilmMsg.cover" alt="" />
          <span>{{ FilmMsg.name }}</span>
          <div class="Msg1">
            <span>类型:{{ FilmMsg.type }}</span>
            <span>地区:{{ FilmMsg.region }}</span>
            <span>时长:{{ FilmMsg.duration }}</span>
          </div>

          <div class="Msg2">
            <span>放映:{{ arrangement.type }}放映</span>
            <span>
              开场:
              <span>{{ arrangement.date }} {{ arrangement.startTime }}</span>
            </span>
            <span>散场:{{ arrangement.endTime }}</span>
            <span>票价:￥{{ arrangement.price }}/张</span>
          </div>
          <div class="line"></div>
          <div class="Msg3">
            <span>
              已选座位:
              <span v-for="(seat, index) in PurchaseInfo.seat" :key="index">
                {{ seat }},
              </span>
            </span>
            <span>
              总计:
              <span class="Price">￥{{ totalprice }}</span>
            </span>
          </div>
          <div class="line"></div>
          <el-input
            v-model="PurchaseInfo.phone"
            placeholder="请输入手机号码"
          ></el-input>
          <el-button @click="subOrder()" type="danger" round
            >加入购物车</el-button
          >
        </div>

        <!-- 选座部分 -->
        <div class="conRight">
          <!-- 座位标识 -->
          <div class="iconExpress">
            <div class="optionalseat">
              <img src="@/assets/Ticketbuy/未选择.png" alt="" />
              <span>可选座位</span>
            </div>
            <div class="selectedseat">
              <img src="@/assets/Ticketbuy/已选中.png" alt="" />
              <span>可选座位</span>
            </div>
            <div class="soldseat">
              <img src="@/assets/Ticketbuy/不可选.png" alt="" />
              <span>可选座位</span>
            </div>
          </div>

          <!-- 荧幕位置 -->
          <div class="screen"></div>
          <span class="screentext">银幕中央</span>

          <!-- 座位选择 -->
          <div class="selectseat">
            <div v-for="line in 12" :key="line">
              <div
                class="seat"
                v-for="row in 4"
                :key="row"
                @click="choose(row - 1, line - 1)"
              >
                <img
                  v-if="seats[row - 1][line - 1] == 0"
                  src="@/assets/Ticketbuy/未选择.png"
                  alt=""
                />
                <img
                  v-if="seats[row - 1][line - 1] == 1"
                  src="@/assets/Ticketbuy/已选中.png"
                  alt=""
                />
                <img
                  v-if="seats[row - 1][line - 1] == 2"
                  src="@/assets/Ticketbuy/不可选.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="dashedline"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArrangementById, getSeats, subOrder } from "@/api/user.js";
export default {
  name: "ChooseSeat",
  data() {
    return {
      FilmMsg: {
        name: "XXXXXX",
        cover: require("@/assets/Home/u2097.svg"),
        type: "喜剧",
        region: "中国大陆",
        duration: 128,
      },
      arrangement: {
        type: "2D",
        date: "5-28",
        startTime: "06:00:00",
        endTime: "08:00:00",
        price: 45,
      },
      PurchaseInfo: {
        seat: [],
        price: 0,
        phone: "",
      },
      seats: [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
    };
  },
  methods: {
    // 选取座位
    choose(x, y) {
      if (this.seats[x][y] == 0) {
        this.seats[x][y] = 1;
        this.PurchaseInfo.seat.push(x + "-" + y);
      } else if (this.seats[x][y] == 1) {
        this.seats[x][y] = 0;
        var str = x + "-" + y;
        this.PurchaseInfo.seat = this.deleteseat(str, this.PurchaseInfo.seat);
      }
    },
    // 删除选中座位
    deleteseat(seat, arr) {
      var index = arr.indexOf(seat);
      arr.splice(index, 1);
      return arr;
    },
    // 获取场次信息
    getArrangementMsg: function () {
      getArrangementById(this.$route.query.id).then((res) => {
        this.arrangement = res.data.arrangement;
        this.FilmMsg = res.data.film;
      });
    },
    // 获取位置信息
    getSeats: function () {
      getSeats(this.$route.query.id).then((res) => {
        if (res.code == 200) {
          let seats = new Array();
          seats = res.data;
          for (let i = 0; i < seats.length; i++) {
            let arr = new Array(2);
            arr = seats[i].split("-");
            let x = Number(arr[0]);
            let y = Number(arr[1]);
            this.seats[x][y] = 2;
          }
        }
      });
    },
    // 加入购物车
    subOrder: function () {
      if (this.PurchaseInfo.seat.toString() == "") {
        this.$message({
          message: "请选择座位",
          type: "error",
        });
        return;
      }
      if (this.PurchaseInfo.phone == "") {
        this.$message({
          message: "请输入手机号",
          type: "error",
        });
        return;
      }
      subOrder(
        localStorage.getItem("uid"),
        this.arrangement.id,
        this.PurchaseInfo.seat.toString(),
        this.PurchaseInfo.phone,
        null,
        this.totalprice
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "加入成功",
            type: "success",
          });
        }
      });
    },
  },
  computed: {
    totalprice: function () {
      return this.arrangement.price * this.PurchaseInfo.seat.length;
    },
  },
  mounted() {
    this.getArrangementMsg();
  },
  beforeMount() {
    this.getSeats();
  },
};
</script>

<style lang="less" scoped>
.Choose {
  width: 100%;
  .ChooseInner {
    width: 1440px;
    margin: 40px auto;
    .content {
      margin-top: 50px;
      width: 100%;
      height: 700px;
      box-shadow: 2px 2px 5px gray;
      display: flex;
      .conLeft {
        width: 25%;
        background-color: rgba(245, 246, 247, 1);
        height: 100%;
        position: relative;
        img {
          width: 137px;
          position: absolute;
          left: 40px;
          top: 40px;
        }
        .Msg1,
        .Msg2,
        .Msg3 {
          display: flex;
          flex-direction: column;
          position: absolute;
        }
        .Msg1 {
          top: 90px;
          left: 200px;
        }
        .Msg2 {
          top: 251px;
          left: 40px;
          span span {
            color: red;
          }
        }
        .Msg2 > span,
        .Msg3 > span {
          display: block;
          margin-top: 10px;
        }
        .Msg3 {
          left: 40px;
          top: 400px;
          .Price {
            color: red;
            font-size: 25px;
          }
        }
        .line {
          width: 80%;
          margin: 20px auto;
          border-bottom: 1px solid black;
        }
        .line:nth-child(5) {
          position: absolute;
          top: 370px;
          left: 30px;
        }
        .line:nth-child(7) {
          position: absolute;
          top: 490px;
          left: 30px;
        }
        .el-input {
          width: 70% !important;
          position: absolute;
          top: 550px;
          left: 40px;
        }
        .el-button {
          width: 60% !important;
          position: absolute;
          top: 620px;
          left: 70px;
        }
      }
      .conLeft > span:nth-child(2) {
        position: absolute;
        left: 200px;
        top: 40px;
        font-size: 25px;
        font-weight: 400;
      }

      // 右半部分
      .conRight {
        height: 100%;
        width: 75%;
        background-color: rgba(255, 255, 255, 1);
        // 切换流式布局
        display: flex;
        flex-direction: column;
        position: relative;
        // 座位颜色标识
        .iconExpress {
          display: flex;
          justify-content: center;
          margin-top: 40px;
          img {
            width: 40px;
            height: 40px;
            vertical-align: middle;
          }
          span {
            margin: 0 30px 0 10px;
          }
        }
        .screen {
          width: 660px;
          height: 23px;
          margin: 0 auto;
          margin-top: 20px;
          background-color: rgba(242, 242, 242, 1);
        }
        .screentext {
          display: block;
          margin: 10px auto;
        }

        // 座位选择
        .selectseat {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          img {
            width: 40px;
            height: 40px;
            margin: 0 5px;
          }
          .seat {
            cursor: pointer;
          }
        }
        .dashedline {
          height: 170px;
          border-right: 1px dashed darkgray;
          position: absolute;
          left: 540px;
          top: 170px;
        }
      }
    }
  }
}
</style>